<template>
  <div>
    <!-- 三级分类 -->
    <el-card style="margin-bottom: 20px">
      <Category @changeCategory="changeCategory" :isVisible="isShowList" />
    </el-card>
    <!-- 展示列表 -->
    <el-card>
      <div v-show="isShowList">
        <el-button
          type="primary"
          class="iconfont el-icon-plus"
          @click="showSpuForm"
          :disabled="!category3Id"
        >
          添加SPU
        </el-button>
        <el-table :data="spuList" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="spu名称"> </el-table-column>
          <el-table-column prop="description" label="spu描述">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-tooltip
                class="item"
                effect="dark"
                content="添加sku"
                placement="bottom"
              >
                <el-button
                  type="success"
                  class="iconfont el-icon-plus"
                  size="mini"
                  @click="addSkuForm(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="修改spu"
                placement="bottom"
              >
                <el-button
                  type="primary"
                  class="iconfont el-icon-edit"
                  size="mini"
                  @click="showSpuForm(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="查看sku列表"
                placement="bottom"
              >
                <el-button
                  type="info"
                  class="iconfont el-icon-info"
                  size="mini"
                  @click="showDialog(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除spu"
                placement="bottom"
              >
                <el-button
                  type="danger"
                  class="iconfont el-icon-delete"
                  size="mini"
                  @click="delSpu(row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!--   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 5, 10]"
          :page-size="limit"
          layout=" prev, pager, next, jumper,->, sizes,total"
          :total="total"
          style="text-align: center"
        >
        </el-pagination>
      </div>

      <!-- SpuForm -->
      <SpuForm
        v-show="isShowSpuForm"
        ref="spuForm"
        :category3Id="category3Id"
        :visible.sync="isShowSpuForm"
        @success="successEmit"
        @cancel="cancelSpu"
      />
      <!-- SkuForm -->
      <SkuForm
        v-show="isShowSkuForm"
        ref="skuForm"
        :visible.sync="isShowSkuForm"
      />
    </el-card>
    <el-dialog :title="`${spu.spuName}=>SKU列表`" :visible.sync="dialogVisible">
      <el-table :data="skuList" style="width: 100%">
        <el-table-column prop="skuName" label="名称" width="width">
        </el-table-column>
        <el-table-column prop="price" label="价格(元)" width="width">
        </el-table-column>
        <el-table-column prop="weight" label="重量(千克)" width="width">
        </el-table-column>
        <el-table-column label="默认图片" width="width">
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Category from "@/components/category";
import SpuForm from "./components/spuForm.vue";
import SkuForm from "./components/skuForm.vue";

export default {
  name: "Spu",
  data() {
    return {
      category1Id: "",
      category2Id: "",
      category3Id: "",

      spuList: [],

      page: 1,
      limit: 5,
      total: 10,

      isShowSpuForm: false,
      isShowSkuForm: false,

      dialogVisible: false,

      skuList: [],
      spu: {},
    };
  },
  methods: {
    // 通过三级选择器获取三个id
    changeCategory(attr) {
      this.category1Id = attr.category1Id;
      this.category2Id = attr.category2Id;
      this.category3Id = attr.category3Id;
      this.getSpuList();
    },
    // 获取SPU信息
    async getSpuList(page) {
      if (page) {
        this.page = page;
      }
      const { data } = await this.$API.spu.getSpuList(
        this.page,
        this.limit,
        this.category3Id
      );
      this.total = data.total;
      this.spuList = data.records;
    },
    // 修改spu
    showSpuForm(row) {
      this.isShowSpuForm = true;
      // 通过ref可以操作组件中的方法

      if (row.id) {
        // 如果是修改spu就会进入这里
        // 给修改spu添加一个标识
        this.flag = true;
        this.$refs.spuForm.initSpuInfo(row);
      } else {
        // 如果是添加spu就会进入这里
        this.$refs.spuForm.initAddSpuInfo();
      }
    },
    // 点击更改条数
    handleSizeChange(value) {
      this.limit = value;
      // 重新获取数据
      this.getSpuList();
    },
    // 点击更改页数
    handleCurrentChange(value) {
      this.page = value;
      // 重新获取数据
      this.getSpuList();
    },
    // 修改完毕重新请求数据
    successEmit() {
      // 如果是修改spu就返回当前页
      if (this.flag) {
        this.getSpuList();
      } else {
        // 如果是添加spu就返回首页
        this.getSpuList(1);
      }
      this.flag = false;
    },
    // 点击取消也要将flag设为false
    cancelSpu() {
      this.flag = false;
    },
    // 删除spu
    delSpu(row) {
      console.log(row);
      this.$confirm(`您确定要删除这个属性吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 发送请求删除对应的spu
          await this.$API.spu.deleteSpu(row.id);
          // 重新请求数据列表
          this.getSpuList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击添加sku
    addSkuForm(row) {
      this.isShowSkuForm = true;

      this.$refs.skuForm.initSkuInfo(
        row,
        this.category1Id,
        this.category2Id,
        this.category3Id
      );
    },
    // 展示dialog
    async showDialog(row) {
      this.dialogVisible = true;
      this.spu = row;
      const { data } = await this.$API.sku.getSkuList(row.id);
      console.log(data);
      this.skuList = data;
    },
  },
  computed: {
    isShowList() {
      const { isShowSpuForm, isShowSkuForm } = this;
      return !isShowSpuForm && !isShowSkuForm;
    },
  },
  components: {
    Category,
    SpuForm,
    SkuForm,
  },
};
</script>

<style scoped>
.item {
  margin: 4px;
}
</style>
